<template>
  <div class="article-container">
    <div class="el-avatar-wrap flex-yc flex-xbt">
      <div class="flex-yc">
        <img src="" class="el-avatar" />
        <span class="username">{{ article.nickName }}</span>
        <el-button type="primary" plain size="small" v-if="Number(article.boardId) === 10001">
          悬赏: {{ article.money }} 佰茵币
        </el-button>
      </div>
      <more-com :options="['举报', '删除']" @onClickOption="onClickOption">
        <el-icon class="a active"><MoreFilled /></el-icon>
      </more-com>
    </div>
    <span class="title flex-yc">
      <b>{{ article.boardName }}</b>
      {{ article.title }}
    </span>
    <p class="con">{{article.content}}</p>
    <div class="detail-wrap">
      <slot></slot>
    </div>
    <div class="comment-wrap flex-xbt">
      <div class="flex-yc" v-if="article.readCount">
        <span class="a">
          <i class="iconfont icon-comment fz"></i>
          {{ article.readCount }}
        </span>
        <span class="a">
          <i class="iconfont icon-like"></i>
          {{ article.goodCount }}
        </span>
        <span class="a" @click="$router.push('/forum/index/detail')">
          <i class="iconfont icon-right-rund"></i>
          查看全部
        </span>
      </div>
      <div class="flex-yc">
        <i class="iconfont icon-time el-icon--left"></i>
        {{ article.postTime }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MoreCom from '@/pages/forum/components/MoreCom.vue'
import { articleType } from '@/pages/forum/types/article.ts'

defineProps<{
  article: articleType
}>()
</script>

<style scoped lang="scss">
.el-avatar-wrap {
  margin-bottom: 15px;
  font-size: 14px;
  color: #333;

  .el-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .username {
    padding: 0 5px;
    font-weight: 500;
  }
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #191b1f;

  b {
    color: $primary;
  }
}

p.con {
  margin: 8px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #191b1f;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.comment-wrap {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 400;
  color: #8691a3;

  span.a {
    & + span.a {
      margin-left: 28px;
    }
  }
}
</style>
